<template>
  <grid-layout class="event-details" :layout="layout">
    <template #left>
      <split-title text="基础信息" />
      <descriptions :columns="infoColumns" :data-source="infoData" :col-span="24" />
      <div>
        <span style="color: rgba(255, 255, 255, 0.5)">附件：</span>
        <attachment-list v-if="reportData && reportData.length" :data-list="reportData" />
        <span v-else>-</span>
      </div>
    </template>
    <template #right>
      <split-title text="事件进度" class="flex-fixed" />
      <div class="flex-auto-height" style="overflow: hidden auto; padding-top: 6px">
        <!--      <event-time-line v-if="is_tjsjt == 1" :data-list="tjDetails" />-->
        <event-time-line :data-list="infoData.record_list" />
      </div>
    </template>
    <template #bottom>
      <div class="bottom" v-if="btnShow">
        <a-button v-for="(item, index) in clickName" :key="index" @click="btnClick(item, event_id)">
          {{ item.name }}
        </a-button>
      </div>
    </template>
  </grid-layout>
</template>

<script>
import find from 'lodash-es/find.js';
import GridLayout from '@gis/lib/layouts/grid-layout.vue';
import InfoTitle from '@gis/lib/components/splitter/info-title.vue';
import { getEventInfoDetail, eventTjDetails } from '@gis/lib/api';
import { showVideoConferencingDialog } from '@gis/lib/components/tx-webrtc/index.js';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';
import SplitTitle from '@gis/lib/components/splitter/split-title.vue';

import AttachmentList from '@gis/lib/components/attachment-list.vue';
import EventTimeLine from './event-time-line.vue';
import { openEventHandleDialog } from './event-opt.js';
import { handleCommonRes } from '@gis/lib/utils/resolver.js';

export default {
  name: 'event-details',
  components: {
    SplitTitle,
    AttachmentList,
    EventTimeLine,
    GridLayout,
    InfoTitle,
  },
  props: {
    event_id: { type: String, default: '' },
    btnShow: { type: Boolean, default: true },
  },
  data() {
    return {
      is_tjsjt: '',
      tjDetails: [],
      layout: [
        { name: 'left', colSpan: 10, style: { padding: '15px' } },
        { name: 'right', colSpan: 14, style: { padding: '15px' } },
      ],
      clickName: [],
      infoColumns: [
        { label: '描述', key: 'event_describe' },
        { label: '事发时间', key: 'occur_time' },
        { label: '处置截止时间', key: 'deadline' },
        { label: '地点', key: 'location' },
        { label: '类别', key: 'p_type_name' },
        { label: '预警类型', key: 'warn_type' },
        { label: '预警来源', key: 'source' },
        { label: '预警联系人', key: 'report_person_name' },
        { label: '联系电话', key: 'report_person_phone' },
        { label: '受理人', key: 'receiver_name_str' },
      ],
      infoData: {},
      reportData: {},
    };
  },
  created() {
    this.polling();
  },
  unmounted() {
    clearTimeout(this.pollingTimer);
  },
  beforeDestroy() {
    clearTimeout(this.pollingTimer);
  },
  methods: {
    async polling() {
      clearTimeout(this.pollingTimer);
      await this.getDataAsync();
      this.pollingTimer = setTimeout(() => {
        this.polling();
      }, 60 * 1000);
    },
    async getDataAsync() {
      const { area_code } = useUserInfoStore();
      const params = {
        area_code: area_code,
        event_id: this.event_id,
      };
      const res = await getEventInfoDetail(params);
      const data = res.data || {};

      const person_list = data.person_list || [];
      let record_list = [];
      record_list = record_list.concat(data.record_list || []);

      // 提及事件详情
      const { is_tjsjt } = data;
      this.is_tjsjt = is_tjsjt;
      if (is_tjsjt == 1) {
        const data = await handleCommonRes(eventTjDetails, { event_id: this.event_id });
        // console.log(data, '提及事件详情');
        record_list = record_list.concat(
          data.map((item) =>
            Object.assign(
              {},
              {
                action: item.action || '-',
                create_time: item.createTime || '-',
                content: item.remark || '-',
                creator_name: item.dept || '-',
                attachment_list: [],
              }
            )
          )
        );
      }

      this.infoData = Object.assign({}, data, {
        record_list,
        receiver_name_str: person_list.map((item) => `${item.receiver_name}`).join(','),
      });
      this.setTimeLineList(res.data);
      const funData = [{ content: '视频连线', name: '视频连线', type: 5 }];
      if (res.data.handle_state === 1) {
        funData.push({ content: '事件指派', name: '指派', type: 1 });
        funData.push({ content: '事件上报', name: '上报', type: 2 });
        funData.push({ content: '事件办结', name: '办结', type: 3 });
        funData.push({ content: '事件无效', name: '无效', type: 4 });
      } else if (res.data.handle_state === 2) {
        funData.push({ content: '事件指派', name: '指派', type: 1 });
        funData.push({ content: '事件上报', name: '上报', type: 2 });
        funData.push({ content: '事件办结', name: '办结', type: 3 });
      } else if (res.data.handle_state === 3) {
        funData.push({ content: '事件办结', name: '办结', type: 3 });
      }
      this.clickName = funData;
    },
    setTimeLineList(data = {}) {
      const record_list = data.record_list || [];
      let dataItem = find(record_list, (item) => item.action === '建立');
      this.reportData = dataItem && dataItem.attachment_list ? dataItem.attachment_list : [];
    },
    btnClick({ content, type }, event_id) {
      if (type === 5) {
        return showVideoConferencingDialog();
      }
      openEventHandleDialog(
        {
          type,
          event_id,
          onHandleSuccess: () => {
            this.polling();
          },
        },
        { title: content }
      );
    },
  },
};
</script>

<style scoped lang="less">
.event-details {
  .bottom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
  }
  /deep/ .grid-layout-row > .ant-row > .ant-col {
    height: 100%;
  }
}
</style>
